<template>
    <div>
          <header>
                    <input type="text" v-model="areaInput" @blur="onBlur" placeholder="搜索课程">
                    <div class="boxss">
                        <div @click="areaShow = true" class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>区域</span>
                        </div>
                         <div @click="show = true" style="margin-left:0.1rem" class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>课程</span>
                        </div>
                    </div>
                    
                    <van-icon class="icon" name="search" />
                </header>
        <van-tabs v-model="active" sticky  swipeable title-active-color="#2A9CFF" @change="onChange" animated>
            <van-tab v-for="(data,index) in tabs" :key="index" :title="data">
                <div class="box">
                <div style="height:0.6rem"></div>
                <ul>
                    <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                        <li v-for="(data,index) in list" :key="index">
                            <div class="top">
                                <div class="right">
                                    <div class="img">
                                        <img :src="data.userHead" alt="">
                                    </div>
                                    <div class="message">
                                        <div class="name">{{data.submitUsername}} <span>({{data.fenxiangUserdep}})</span></div>
                                        <div class="lesson" v-if="activeIndex == 2">{{data.className}}-{{data.classPartName}}-{{data.partName}}</div>
                                    </div>
                                </div>
                                
                                <div @click="shear(data.id,data.fenxiang,data.submitUser)" :style="{background:data.fenxiang == 2 ? '#A2A2A2':''}" class="shear">
                                    <img src="img/fenxianga@2x.png" alt="">
                                    <span>分享</span>
                                </div>
                            </div>
                            <div v-if="activeIndex == 0" class="video videoss">
                                <div v-for="(datas,value) in data.videoFile.split('*')" :key="value"  class="item items"><img @click="lookImg(data.videoFile.split('*'),value)" :src="'http://niu.icrobot.cn/'+datas" alt=""></div>
                            </div>
                            <div v-else class="video">
                                <div class="item"><img @click="openVideo(data.videoFile)" src="img/shipinkaobei.png" alt=""></div>
                            </div>
                            
                            <div class="bottom">
                                {{data.createTime}}
                            </div>
                        </li>
                   </van-list>
                </ul>
                </div>
            </van-tab>
            
        </van-tabs>
           <van-overlay :show="videoShow"  @click="closeVideo">
            <div class="wrapper" @click="videoShow = false">
            <div class="videos" @click.stop>
                <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
                >
                </video-player>
            </div>
            </div>
      </van-overlay>
        <van-popup v-model="show" position="bottom">
            <van-picker
                title="选择部门"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"  
                />
        </van-popup>
        <van-popup v-model="areaShow" position="bottom">
            <van-picker
                title="选择部门"
                show-toolbar
                :columns="areaColumns"
                @confirm="areaConfirm"
                @cancel="areaCancel"  
                />
        </van-popup>
    </div>
</template>
<script>
import { ImagePreview } from 'vant'
export default {
    mounted() {
        // this.getData('/approve/querySupervisionCheckWonderfulVideo','精彩视频');
       (async ()=>{
            let lesson = await this.get('/course/selectAllBusiness');
            let {data} = await this.get('/user/findAllDep');
            this.partment = data;
            let business2 = this.partment.filter(item =>item.pid == 0).map(item=>{return {text:item.areaName,children:[],...item}});
            let packages2 = this.partment.filter(item => item.pid == 1).map(item=>{return {text:item.areaName,children:[],...item}});
            data.forEach(item=>{
                packages2.forEach(value=>{
                    if(item.pid == value.id){
                        value.children.push({
                            ...item,
                            text:item.areaName
                        })
                    }
                })
            })
            business2.forEach(item=>{
                packages2.forEach(value=>{
                    if(value.pid == item.id){
                        item.children.push(value)
                    }
                })
            })
            console.log(business2);
            business2.unshift({text:'全部',children:[{text:'全部',children:[{text:'全部'}]}]});
            this.areaColumns = business2;
            this.lesson = lesson.data;
            let business = this.lesson.filter(item =>item.businessType == '事业部').map(item=>{return {text:item.businessName,children:[],...item}});
            let packages = this.lesson.filter(item => item.businessType == '课程包').map(item=>{return {text:item.businessName,children:[],...item}});
            let course = this.lesson.filter(item => item.businessType == '课程').map(item=>{return {text:item.businessName,...item}});
            let arr = this.pushChildren(packages,course);
            let newArr =  this.pushChildren(business,arr);
            newArr.unshift({text:'全部',children:[{text:'全部',children:[{text:'全部'}]}]})
            this.columns = newArr;
       })()
    },
    data() {
        return {
            activeIndex:0,
            areaInput:'',
            areaChange:'',
            lessonChange:'',
            show:false,
            areaShow:false,
            active:0,
            lesson:'',
            videoShow:false,
            tabs:['手写教案','备课视频','精彩视频'],
            list:[],
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            areaColumns:['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            loading:false,
            finished: false,
            pageNum:1,

            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

                autoplay: false, //如果true,浏览器准备好时开始回放。

                muted: false, // 默认情况下将会消除任何音频。

                loop: false, // 导致视频一结束就重新开始。

                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

                language: "zh-CN",

                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

                sources: [
                {
                    type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目

                    src: "", //url地址
                },
                ],

                poster: "img/bofangshipin.png", //你的封面地址

                width: document.documentElement.clientWidth, //播放器宽度

                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。

                controlBar: {
                timeDivider: true,

                durationDisplay: true,

                remainingTimeDisplay: false,

                fullscreenToggle: true, //全屏按钮
                },
      },
        }
    },
    methods: {
        shear(id,status,userId){
            if(status == 2){
                this.$toast('已分享');
                return;
            }
            if(this.activeIndex == 0){
                (async ()=>{
                    let data = await this.get('/approve/headTeachingPlanFenXiang',{fenxiang:2,id,userId});
                    if(data.code == 200){
                        this.$toast('分享成功');
                        this.list.forEach(item=>{
                            if(item.id == id){
                                item.fenxiang = 2;
                            }
                        })
                    }
                })()
            }else if(this.activeIndex == 1){
                (async ()=>{
                    let data = await this.get('/approve/classVideoFenXiang',{fenxiang:2,id,userId});
                    if(data.code == 200){
                        this.$toast('分享成功');
                        this.list.forEach(item=>{
                            if(item.id == id){
                                item.fenxiang = 2;
                            }
                        })
                    }
                })()
            }else if(this.activeIndex == 2){
                (async ()=>{
                    let data = await this.get('/approve/wonderfulVideoFenXiang',{fenxiang:2,id,userId});
                    if(data.code == 200){
                        this.$toast('分享成功');
                        this.list.forEach(item=>{
                            if(item.id == id){
                                item.fenxiang = 2;
                            }
                        })
                    }
                })()
            }
            // (async ()=>{
            //     let data = await this.get('/approve/headTeachingPlanFenXiang',{fenxiang:2,id});
            //     if(data.code == 200){
            //         this.$toast('分享成功');
            //         this.list.forEach(item=>{
            //             if(item.id == id){
            //                 item.fenxiang = 2;
            //             }
            //         })
            //     }
            // })()
        },
        onBlur(){
            // if(!this.areaInput){
            //     this.lessonChange = '';
            //     this.areaChange = '';
            //     this.list = [];
            //     this.pageNum = 1;
            //     this.finished = false;
            //     this.loading = true;
            //     this.onLoad();
            //     return
            // }
                this.lessonChange = '';
                this.areaChange = '';
                this.list = [];
                this.pageNum = 1;
                this.finished = false;
                this.loading = true;
                this.onLoad();
        },
        lookImg(arr,index){
            arr = arr.map(item=>'http://niu.icrobot.cn/'+item);
            ImagePreview({images:arr,startPosition: index});
        },
        areaConfirm(value,item){
            this.lessonChange = '';
            if(value[0] == '全部'){
                this.areaChange = '';
                 this.list = [];
                this.pageNum = 1;
                this.finished = false;
                this.loading = true;
                this.onLoad();
                this.areaShow = false;
                return;
            }
            console.log(value)
            this.areaChange = this.areaColumns[item[0]].children[item[1]].children[item[2]].id;
                this.list = [];
                this.pageNum = 1;
                this.finished = false;
                this.loading = true;
                this.onLoad();
            this.areaShow = false;
        },
        areaCancel(){
            this.areaShow = false;
        },
        onConfirm(value,item){
            this.areaChange = '';
            if(value[0] == '全部'){
                this.lessonChange = '';
                this.list = [];
                this.pageNum = 1;
                this.finished = false;
                this.loading = true;
                this.onLoad();
                this.show = false
                return;
            }
            this.lessonChange = this.columns[item[0]].children[item[1]].children[item[2]].id;
            console.log(this.lessonChange);
                this.list = [];
                this.pageNum = 1;
                this.finished = false;
                this.loading = true;
                this.onLoad();
            this.show = false
        },
        onCancel() {
            this.show = false
        },
        onChange(index){
            this.activeIndex = index;
            this.list = [];
            this.pageNum = 1;
            this.finished = false;
            this.loading = true;
            this.areaInput='',
            this.areaChange='',
            this.lessonChange='',
            this.onLoad();
        },
        pushChildren(father,child){
              father.forEach(item=>{
                child.forEach(value=>{
                    if(item.id == value.pid){
                        item.children.push(value)
                    }
                })
            })
            return father
        },
        onLoad(){ 
            if(this.activeIndex == 2){
                 this.getData('/approve/querySupervisionCheckWonderfulVideo','精彩视频',this.areaInput,this.areaChange,this.lessonChange);
            }else if(this.activeIndex == 1){
                this.getData('/approve/queryBeikeVideo','备课视频',this.areaInput,this.areaChange,this.lessonChange);
            }else {
                this.getData('/approve/queryBeikeVideo','手写教案',this.areaInput,this.areaChange,this.lessonChange,);
            }
              
        },
        openVideo(file){
            this.videoShow = true;
            this.playerOptions.sources[0].src = 'http://niu.icrobot.cn/' + file;
        },
        closeVideo(){
                this.videoShow = false;
                console.log(this.$refs.videoPlayer);
                // this.$refs.videoPlayer.pause();
                this.playerOptions.sources[0].src = '';
        },
        getData(path,type,keyWord,depType,classType){
            (async ()=>{
                let { data } = await this.get(path,{pageNum:this.pageNum,pageSize:5,renwuType:type,keyWord,depType,classType});
                this.list =[...data.items,...this.list];
                this.loading = false;
                this.pageNum++;
                if(data.items.length == 0 || data.items.length < 5){
                    this.finished = true;
                }
            })()
        }
    },
}
</script>
<style lang="scss" scoped>
.videoss{
    // width: 2rem !important;
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
}
    /deep/ .van-tabs__line{
        background:#2A9CFF ;
    }
    .icon{
        position: absolute;
        left: 0.3rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.3rem;
    }
    .wrapper {
    display: flex;
    z-index: 1000000;
    align-items: center;
    justify-content: center;
    height: 100%;

  // width: 2rem;

  // background: white;
}

.videos {
  width: 100%;

  height: 4rem;
}

    header{
        padding: 0.1rem 0.2rem;
        box-sizing: border-box;
        position: fixed;
        width: 100%;
        top: 0.86rem;
        background:#F7F9FA;
        justify-content: space-between;
        display: flex;
        z-index: 1;
        align-items: center;
        input{
            // width: 5.6rem;'
            flex: 1;
            height: 0.4rem;
            border-radius: 0.2rem;
            background: white;
            border: none;
            font-size: 0.22rem;
            padding-left: 0.5rem;
            box-sizing: border-box;
            color: #9C9C9C;
        }
        .boxss{
            display: flex;
            align-items: center;
            // flex: 1;
            flex-wrap: nowrap;
            margin-left: 0.1rem;
        }
        .right{
            width: 1.2rem;
            height: 0.4rem;
            border: 0.01rem solid #C3C3C3;
            border-radius: 0.2rem;
            padding:0.1rem 0.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #343434;
            img{
                width: 0.22rem;
                height: 0.22rem;
            }
        }
    }
    ul{
        padding: 0 0.24rem;
        box-sizing: border-box;
        li{
            margin-top: 0.22rem;
            border-bottom: 0.01rem solid #eee;
            .top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .right{
                    display: flex;
                    align-items: center;
                    .img{
                        width: 0.72rem;
                        height: 0.72rem;
                        border-radius: 50%;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            display: block;
                        }
                    }
                    .message{
                        margin-left: 0.17rem;
                        .name{
                            font-size: 0.26rem;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #343434;
                        }
                        .lesson{     
                            font-size: 0.22rem;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #FA742B;
                            margin-top: 0.08rem;
                        }
                    }
                }
                .shear{
                   width: 1.02rem;
                    height: 0.4rem;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    justify-content: space-between;
                    background: #2E9EFF;
                    border-radius: 0.06rem; 
                    display: flex;
                    align-items: center;
                    font-size: 0.18rem;
                    font-family: PingFang SC;
                    // font-weight: bold;
                    color: #FEFEFE;
                    img{
                        width: 0.18rem;
                        height: 0.18rem;
                    }
                    span{
                        margin-left: 0.06rem;
                    }
                }
            }
            .video{
                margin-left: 0.9rem;
                margin-top: 0.2rem;
                .item{
                    width: 1.44rem;
                    height: 1.44rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .bottom{
                margin-top: 0.27rem;
                font-size: 0.2rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #7E7E7E;
                margin-left: 0.9rem;
                padding-bottom: 0.3rem;
            }
        }
    }
    .boxs{
        display: flex;
        align-items: center;
        margin-left: 0.2rem;
    }
</style>